<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view class="personInfo_container">
      <!-- 頭像 -->
      <view class="personInfo_container__avatar">
        <view class="avatar_box">
          <img :src="'./static/demo/avatar.png'" class="avatar_image" alt="" />
          <img
            :src="'./static/demo/avatar_setting.png'"
            class="avatar_setting"
            alt=""
          />
        </view>
      </view>
      <!-- id -->
      <view class="personInfo_container__id">id：88888888 </view>

      <!-- 佔位符 -->
      <view style="height: 30rpx"></view>

      <!-- 表單 -->
      <view class="info_form">
        <view class="personInfo_form_item">
          <view class="label">昵稱 </view>

          <view class="value">
            <u--input
              placeholder="請輸入昵稱"
              prefixIconStyle="font-size: 22px;color: #909399"
              border="none"
              :value="nickName"
            ></u--input>
          </view>
        </view>

        <view class="personInfo_form_item">
          <view class="label">性別 </view>

          <view class="value">
            <u--input
              placeholder="請輸入性別"
              prefixIconStyle="font-size: 22px;color: #909399"
              border="none"
              :value="sex"
            ></u--input>
          </view>
        </view>

        <view class="personInfo_form_item">
          <view class="label">手機號碼 </view>

          <view class="value">
            <u--input
              placeholder="請輸入手機號碼"
              prefixIconStyle="font-size: 22px;color: #909399"
              border="none"
              :value="phone"
            ></u--input>
          </view>
        </view>

        <view class="personInfo_form_item">
          <view class="label">生日 </view>

          <view class="value">
            <u--input
              placeholder="請輸入生日"
              prefixIconStyle="font-size: 22px;color: #909399"
              border="none"
              @focus="dateTimeShow = true"
              v-model="birthday"
            ></u--input>
          </view>
        </view>

        <view class="personInfo_form_item">
          <view class="label">EMAIL帳號 </view>

          <view class="value">
            <u--input
              placeholder="請輸入EMAIL帳號"
              prefixIconStyle="font-size: 22px;color: #909399"
              border="none"
              v-model="email"
            ></u--input>
          </view>
        </view>

        <view class="personInfo_form_item">
          <view class="label">我的地址 </view>

          <view class="value">
            <u--input
              placeholder="請輸入我的地址"
              prefixIconStyle="font-size: 22px;color: #909399"
              border="none"
              v-model="address"
            ></u--input>
          </view>
        </view>
      </view>
    </view>

    <!-- 生日提示 -->
    <view class="birthday_tip">
      <view class="text">生日僅可設置一次，設置後參與生日有禮</view>
      <view class="btn">去看看</view>
    </view>

    <!-- 當前餘額 -->
    <view class="balance">
      <view class="title">當前餘額</view>
      <view class="money"
        >$ 0.00 <img :src="'./static/me/Vector.png'" alt=""
      /></view>
    </view>

    <!-- 保存按鈕 -->
    <view class="save_btn_box">保存</view>

    <u-datetime-picker
      :show="dateTimeShow"
      v-model="dateTime"
      mode="date"
      @confirm="dateTimeConfirm"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";
import dayjs from "dayjs";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,

      dateTimeShow: false,
      dateTime: Number(new Date()),

      birthday: "",
      phone: "",
      sex: "",
      nickName: "",
      email: "",
      address: "",
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
    close() {
      this.show = false;
    },
    open() {
      // console.log('open');
    },
    dateTimeConfirm(values) {
      this.birthday = dayjs(values?.value).format("YYYY-MM-DD");
      this.dateTimeShow = false;
    },
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: rgba(243, 243, 243, 1);
}

.index_container {
  padding-left: 26.163rpx;
  padding-right: 26.163rpx;
}

.personInfo_container {
  margin-top: 134.302rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 26.163rpx 0px rgba(0, 0, 0, 0.25);

  width: 695.93rpx;
  //   height: 685.465rpx;

  padding-bottom: 69.767rpx;

  position: relative;

  .avatar_box {
    position: absolute;
    top: -56.5rpx;
    left: 50%;
    transform: translateX(-50%);

    .avatar_image {
      width: 111.628rpx;
      height: 111.628rpx;
    }
    .avatar_setting {
      width: 41.86rpx;
      height: 41.86rpx;
      position: absolute;
      right: -21.43rpx;
      bottom: 0;
    }
  }

  .personInfo_container__id {
    font-family: "Microsoft JhengHei";
    font-size: 27.907rpx;
    font-weight: 400;
    line-height: 48.837rpx;
    text-align: center;
    color: rgba(72, 72, 72, 1);
    padding-top: 102.907rpx;
  }
}

.info_form {
  padding: 0 61.047rpx 0 61.047rpx;
}

.personInfo_form_item {
  padding: 17.442rpx 0 17.442rpx 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid rgba(217, 217, 217, 1);
  .label {
    font-family: "Microsoft JhengHei";
    font-size: 27.907rpx;
    font-weight: 400;
    line-height: 48.837rpx;
    text-align: center;
    color: rgba(41, 41, 41, 1);
  }
}

// /deep/ .input-placeholder {
//     color: red;
// }
::v-deep .input-placeholder {
  font-family: "Microsoft JhengHei";
  font-size: 27.907rpx;
  font-weight: 400;
  line-height: 48.837rpx;
  text-align: center;
  color: rgba(41, 41, 41, 1);
  text-align: right;
}

::v-deep .uni-input-input {
  font-family: "Microsoft JhengHei";
  font-size: 27.907rpx;
  font-weight: 400;
  line-height: 48.837rpx;
  text-align: center;
  color: rgba(0, 0, 0, 1);
  text-align: right;
}

.birthday_tip {
  margin: 38.372rpx 0 38.372rpx 0;
  background: rgba(235, 235, 235, 1);
  border: 0.5rpx solid rgba(169, 169, 169, 1);
  border-radius: 26.163rpx;

  height: 55.814rpx;

  padding: 0 24.419rpx 0 24.419rpx;

  display: flex;
  align-items: center;
  justify-content: space-between;

  .text {
    font-family: "Microsoft JhengHei";
    font-size: 24.419rpx;
    font-weight: 400;
    line-height: 108.14rpx;
    text-align: left;
  }

  .btn {
    font-family: "Microsoft JhengHei";
    font-size: 24.419rpx;
    font-weight: 400;
    line-height: 108.14rpx;
    text-align: right;
    color: rgba(247, 154, 77, 1);
  }
}

.balance {
  width: 695.93rpx;
  //   height: 108.14rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 26.163rpx 0px rgba(0, 0, 0, 0.25);

  //   padding: 34.884rpx;
  padding: 0 75rpx 0 75rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-weight: 400;
  line-height: 108.14rpx;

  font-family: "Microsoft JhengHei";
  font-size: 27.907rpx;
  text-align: center;
  color: rgba(41, 41, 41, 1);

  .money {
    display: flex;
    align-items: center;

    img {
      width: 10.465rpx;
      height: 20.93rpx;

      margin-left: 27.907rpx;
    }
  }
}

.save_btn_box {
  width: 587.791rpx;
  height: 101.163rpx;
  border-radius: 62.791rpx;
  margin-left: 52.326rpx;

  display: flex;
  justify-content: center;
  align-items: center; 
  font-family: "Microsoft Sans Serif";
  font-size: 41.86rpx;
  font-weight: 400;
  line-height: 27.907rpx;
  text-align: center;

  background: rgba(247, 154, 77, 1);

  color: rgba(255, 255, 255, 1);

  margin-top: 62.791rpx;

  
}
</style>
